<template>
  <div class="bg">
    <nav-com
      title="支付二维码"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <div class="main">
      <div class="order-info">
        <div class="order-no">
          <img
            :src="dataInfo.avatar"
            style="width:12vw;height:12vw;border-radius:6vw;"
          >
          <div style="margin-left: 3vw">
            <div>{{dataInfo.nickname}}</div>
            <div>{{dataInfo.mobile}}</div>
          </div>
        </div>
        <div class="info">
          <div class="img">
            <img
              :src="dataInfo.item[0].goods_image"
              alt=""
              style="width:25vw"
            >
          </div>
          <div class="right-info">
            <div class="name">{{dataInfo.item[0].goods_title}}</div>
            <div class="num">数量：{{dataInfo.item[0].goods_num}}</div>
            <div class="money">￥{{dataInfo.item[0].goods_price}}</div>
          </div>
        </div>
      </div>
      <div class="pay">
        <div class="title">截图保存到相册</div>
        <div class="img">
          <img
            :src="dataInfo.qrcode"
            alt=""
            style="width:40vw"
          >
        </div>
        <!-- <div>请保存到手机用支付宝或微信支付</div> -->
        <div class="pay-type">
          <van-icon
            name="wechat-pay"
            color="#09bb07"
            size="20"
          />微信支付
          <van-icon
            name="alipay"
            color="#06b4fd"
            size="20"
          />支付宝支付
        </div>
      </div>
      <div style="text-align:center;font-size:18px">付款流程</div>
      <div style="background:rgba(234, 85, 105, .5);height:10px;width:20vw;margin:0 auto;margin-top:-12px;border-radius:10px"></div>
      <div class="line">
        <div class="index">1</div>
        <span class="text">截图保存APP二维码到相册</span>
      </div>

      <div class="line">
        <div class="index">2</div>
        <span class="text">打开<span style="color:#FE4B20;font-size:5vw">微信</span>/支付宝，点击扫一扫-->选择相册-->打开付款二维码截图，进行付款，半小时内有效。</span>
      </div>
      <div class="button" @click="saveImage">
        截图保存
      </div>
      <div class="mall">
        {{dataInfo.webnmae}}
      </div>
    </div>
  </div>
</template>

<script>
import navCom from "@/component/nav";
import { qrPay, getFttuserUserId2 } from "@/api/api";
export default {
  components: {
    navCom,
  },
  data() {
    return {
      dataInfo: {},
      order_sn: "",
      nickname: "",
      avatar: "a",
      mobile: "",
    };
  },
  created() {
    // this.getUser();
    this.order_sn = this.$route.params.order_sn
    // this.order_sn = "202210231261819001988700";
    console.log(this.order_sn);
    this.init();
  },
  methods: {
    saveImage(){
      if(weixin.isAndroid()){
        window.JS_TROOPS.saveImage
      }
    },
    getUser() {
      getFttuserUserId2().then((res) => {
        console.log("getFttuserUserId2", res);
        if (res.data.code == 1) {
          localStorage.setItem("fttToken", JSON.stringify(res.data.data));
          //未归属
          this.avatar = res.data.data.avatar;
          this.mobile = res.data.data.mobile;
          this.nickname = res.data.data.nickname;
        } else {
        }
      });
    },
    init() {
      qrPay({ order_sn: this.order_sn })
        .then((result) => {
          if (result.data.code == 1) {
            if (result.data.data.qrcode) {
              console.log(0);
              this.dataInfo = result.data.data;
            } else {
              this.$dialog
                .alert({
                  title: "提示",
                  message: "未查询到订单信息，请重试",
                })
                .then(() => {
                  this.backHandler()
                });
            }
          }
        })
        .catch((err) => {});
    },
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }

    },
  },
};
</script>

<style>
.main {
  background: url("../../assets/index/pfmBG.jpg");
  min-height: 94vh;
  background-size: 100% 100%;
  padding-top: 10vh;
}
.mall {
  font-size: 16px;
  text-align: center;
}
.button {
  width: 80vw;
  height: 12vw;
  background: #fe4b20;
  font-size: 18px;
  color: #fff;
  border-radius: 6vw;
  margin: 20px auto;
  text-align: center;
  line-height: 12vw;
}
.pay {
  text-align: center;
}
.pay .title {
  text-align: center;
  font-size: 20px;
}
.pay .img {
  width: 45vw;
  border-radius: 1vw;
  background: #fff;
  margin: 2vw auto;
}
.pay .pay-type {
  font-size: 17px;
  margin: 10px 0;
  height: 30px;
  line-height: 30px;
}
.bg {
  background-size: 100% 100%;
  min-height: 100vh;
  height: 30px;
  line-height: 30px;
}
.order-info {
  margin: 0vw 5vw;
  padding: 3vw;
  background: #fff;
  border-radius: 3vw;
}
.order-info .order-no {
  font-size: 14px;
  color: #808080;
  padding-bottom: 2vw;
  border-bottom: 1px solid #eee;
  display: flex;
}
.order-info .info {
  margin-top: 10px;
  line-height: 30px;
  display: flex;
  align-items: center;
}
.order-info .info .img {
  width: 25vw;
  height: 25vw;
}
.order-info .info .right-info {
  margin-left: 10px;
}
.order-info .info .right-info .name {
  font-size: 18px;
}
.order-info .info .right-info .num {
  font-size: 13px;
}
.order-info .info .right-info .money {
  font-size: 18px;
  color: #fe4b20;
}
.line {
  display: flex;
  margin: 0 10vw;
  margin-bottom: 10px;
}
.dian {
  color: #ea5569;
  line-height: 8px;
  margin: 0 0 5px 6px;
}
.index {
  display: block;
  height: 20px;
  width: 21px !important;
  background: #ea5569;
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
}
.text {
  margin-left: 20px;
  width: 73vw;
  line-height: 20px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #2f2f30;
}
</style>